/**
 * 功能描述: 功能开关样式表
 * @author 崔孝楠
 * @date 2022/9/29 9:18
 * @version 1.0
 */
@import '../../style/index.scss';
@import "../Switch/switchConstant";

// loading 图标布局
@mixin switch-loading-icon--layout {
  position: relative;
  left: 2px;
  bottom: 1px;
  vertical-align: top;
  display: block;
  width: 1em;
  height: 1em;
}

// 点击时动画效果布局
@mixin click-animating-node--layout {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
}

// 点击开关，阴影动画
@-webkit-keyframes waveEffect {
  100% {
    box-shadow: 0 0 0 6px $--switch-checked-background-color;
  }
}
@keyframes waveEffect {
  100% {
    box-shadow: 0 0 0 6px $--switch-checked-background-color;
  }
}
// 点击开关，淡入淡出动画
@-webkit-keyframes fadeEffect {
  100% {
    opacity: 0;
  }
}
@keyframes fadeEffect {
  100% {
    opacity: 0;
  }
}

// 点击时动画效果样式
@include b(click-animating-node) {
  border-radius: inherit;
  box-shadow: 0 0 0 0 $--switch-checked-background-color;
  opacity: 0.2;
  -webkit-animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1);
  // 在动画结束后，元素将应用动画结束时属性值
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  content: '';
  // 去除鼠标事件
  pointer-events: none;
  @include click-animating-node--layout;
}

// 加载中样式
@include b(switch-loading) {
  cursor: not-allowed;
  opacity: .4;
}

// loading 图标颜色
@include b(switch-loading-icon) {
  color: inherit;
  @include switch-loading-icon--layout;
}
// 选中状态 loading 图标颜色
@include b(switch-checked) {
  @include b(switch-loading-icon) {
    color: $--switch-checked-background-color;
  }
}

// loading旋转动画
@-webkit-keyframes loadingCircle {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loadingCircle {
  100% {
    transform: rotate(360deg);
  }
}

// 图标旋转
@include b(icon-spin) {
  -webkit-animation: loadingCircle 1s infinite linear;
  animation: loadingCircle 1s infinite linear;
}
